<template>
	<view class="sxran-im-input-body">
		<view class="sxran-im-input-content">
			<input @focus='focus' @blur="blur" class="sxran-im-input" :class='{"required-error": isRequired}' :type="type"
				@input="onInput" :value="value" :name='name' placeholder="" />
			<view class="placeholder-text" :class='{"sxran-im-input-focus-text ": isfocus}'>
				<text class="required" v-if="required">*</text>
				<text>{{placeholder}}</text>
			</view>
			<uni-icons @click="clear" v-if="value && showClearIcon" class="clear-icon" type='clear' size="20"
				color='var(--uni-text-color)'></uni-icons>
			<!-- <text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
				@click="changePassword">&#xe568;</text> -->
		</view>

	</view>
</template>

<script>
	export default {
		name: 'sxran-im-login-input',
		props: {
			showClearIcon: {
				type: Boolean,
				default: true
			},
			showPassword: {
				type: Boolean,
				default: false
			},
			required: {
				type: Boolean,
				default: false
			},
			name: {
				type: String,
				default: ""
			},
			placeholder: {
				type: String,
				default: ""
			},
			type: {
				type: String,
				default: "text"
			}
		},
		behaviors: ['uni://form-field'],
		data() {
			return {
				isfocus: false,
				value: '',
				isRequired: false,
			}
		},
		methods: {
			focus(event) {
				const {
					value
				} = event.detail;
				this.isfocus = true;
				this.$emit('focus', event)
			},
			blur(event) {
				const {
					value
				} = event.detail;
				!this.value && (this.isfocus = false);
				this.verificationQequired();
				this.$emit('blur', event)
			},
			verificationQequired() {
				if (this.required && !this.value) {
					this.isRequired = true;
				} else {
					this.isRequired = false;
				}
			},
			onInput(e) {

				this.value = e.detail.value;
				this.verificationQequired();
				this.$emit('update:modelValue', e.detail.value)
			},
			clear() {
				this.value = '';
				this.$emit('update:modelValue', '');
				this.isfocus = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.sxran-im-input-body {
		margin-bottom: 20px;

		// width: 250px;
		.sxran-im-input-content {
			display: flex;
			align-items: center;
			position: relative;

			.required {
				margin-right: 5px;
			}

			.required-error {
				border-color: red;
			}

			.clear-icon {
				position: absolute;
				right: 10px;
			}
		}

		.sxran-im-input {
			width: 250px;
			color: var(--uni-text-color);
			// border: 1px solid var(--uni-border-color);
			border-radius: 40px;
			outline: none;
			padding: $uni-spacing-col-base;
			background: rgba(255, 255, 255, .2);
			border: none;
			outline: none;
			padding: 10px 20px;
			border-radius: 35px;
			box-shadow: 0 25px 45px rgba(0, 0, 0, .5);
			border-right: 1px solid rgba(255, 255, 255, .2);
			border-bottom: 1px solid rgba(255, 255, 255, .2);
			// letter-spacing:1px;
			// color: #fff;
			box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03);
			
		}

		.required {
			color: red;
		}

		.placeholder-text {
			position: absolute;
			left: 0;
			top: 0;
			padding: $uni-spacing-row-base $uni-spacing-col-lg;
			// font-size: 14px;
			pointer-events: none;
			color: var(--uni-text-color-placeholder);
			transition: all 0.3s;
			display: flex;
			align-items: center;
		}

		.sxran-im-input-focus-text {
			color: var(--uni-text-color);
			transform: translate($uni-spacing-row-base , -$uni-spacing-col-lg * 0.8);
			font-size: 14px;
			padding: 0 $uni-spacing-col-lg;
			// background: rgba(255, 255, 255, .1);

		}
		
	}
	
	
</style>